<template>
  <div>
    <el-card class="box-card" style="opacity: 0.8;">
      <div slot="header" class="clearfix" style="font-size: 18px">
        <i class="el-icon-s-grid"></i>
        <span>数据列表</span>
      </div>
      <div style="margin-top: 15px">
        <el-input
          placeholder="请输入内容"
          class="input-with-select"
          style="width: 400px"
          @clear="select"
          clearable
          v-model="queryinfo.name"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="select"
          ></el-button>
        </el-input>
        <el-button type="primary" round class="right-but" @click="addpaper"
          ><i class="el-icon-plus" />新添</el-button
        >
      </div>
      <el-divider></el-divider>
      <el-table stripe style="width: 100%" border :data="idType">
        <el-table-column label="#" width="180" type="index"> </el-table-column>
        <el-table-column prop="papersname" label="名称" width="560">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="toupdate(scope.row.papersid)"
            >
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="todelete(scope.row.papersid)"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加对话框 -->
      <el-dialog
        title="添加证件类型"
        :visible.sync="addDialogVisible"
        width="50%"
        :before-close="reset"
      >
        <!-- 添加用户信息的表单 -->
        <el-form
          :model="addidtype"
          :rules="addRule"
          ref="addidtypeRef"
          label-width="80px"
        >
          <el-form-item label="证件名称" prop="papersname">
            <el-input v-model="addidtype.papersname"></el-input>
          </el-form-item>
        </el-form>
        <!-- 取消和添加按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="addidtypeForm">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改 -->
      <el-dialog
        title="修改证件类型"
        :visible.sync="updateDialogVisible"
        width="50%"
        :before-close="updatereset"
      >
        <!-- 添加用户信息的表单 -->
        <el-form
          :model="updateidtype"
          ref="updateidtypeRef"
          :rules="addRule"
          label-width="80px"
        >
          <el-form-item label="证件名称" prop="papersname">
            <el-input v-model="updateidtype.papersname"></el-input>
          </el-form-item>
        </el-form>
        <!-- 取消和添加按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updatereset">取 消</el-button>
          <el-button type="primary" @click="updateidtypeForm">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="queryinfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      queryinfo: {
        name: "", //用户名的模糊查询
        pagenum: 1, //访问的页码
        pagesize: 3, //默认页面展示的条数
      },
      idType: [],
      total: 0,
      addDialogVisible: false,
      addidtype: {
        papersname: "",
      },
      addRule: {
        papersname: [
          {
            required: true,
            message: "请输入证件",
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10个字符",
            trigger: "blur",
          },
        ],
      },
      updateDialogVisible: false,
      updateidtype: {
        papersid: "",
        papersname: "",
      },
    };
  },
  methods: {
    async selectAllIdType() {
      var param = new URLSearchParams();
      param.append("pagenum", this.queryinfo.pagenum);
      param.append("pagesize", this.queryinfo.pagesize);
      param.append("name", this.queryinfo.name);
      var res = await this.$http.post("/selectAllIdType", param);
      if (res.data.code != "200") {
        this.$message.info(res.data.message);
      } else {
        //把查询到的集合数据放入全局的users对象中
        this.idType = res.data.data.list;
        //获取数据的总条数
        this.total = res.data.data.total;
      }
    },
    handleSizeChange(newpagesize) {
      this.queryinfo.pagesize = newpagesize;
      this.selectAllIdType();
    },
    handleCurrentChange(newpagenum) {
      this.queryinfo.pagenum = newpagenum;
      this.selectAllIdType();
    },
    select() {
      this.queryinfo.pagenum = 1;
      this.selectAllIdType();
    },
    addpaper() {
      this.addDialogVisible = true;
    },
    reset() {
      this.addDialogVisible = false;
      this.$refs.addidtypeRef.resetFields();
    },
    addidtypeForm() {
      this.$refs.addidtypeRef.validate(async (val) => {
        if (val) {
          var param = new URLSearchParams();
          param.append("papersname", this.addidtype.papersname);
          var res = await this.$http.post("/addIdType", param);
          if (res.data.code != 200) {
            this.$message.error(res.data.message);
          } else {
            this.$message.success(res.data.message);
            this.selectAllIdType();
          }
        } else {
          this.$message.error("你输入的数据不合法");
        }
        this.reset();
      });
    },
    async toupdate(id) {
      var res = await this.$http.get("selectByIdTypeId?id=" + id);
      if (res.data.code == 200) {
        this.updateidtype = res.data.data;
        this.updateDialogVisible = true;
      } else {
        this.$message.info(res.data.message);
      }
    },
    updatereset() {
      this.updateDialogVisible = false;
      this.$refs.updateidtypeRef.resetFields();
    },
    updateidtypeForm() {
      this.$refs.updateidtypeRef.validate(async (val) => {
        if (val) {
          var res = await this.$http.post(
            "updateIdType",
            qs.stringify(this.updateidtype)
          );
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
            this.selectAllIdType();
          } else {
            this.$message.error(res.data.message);
          }

          this.updatereset();
        } else {
          this.$message.error("数据不合法，请检查");
        }
      });
    },
    async todelete(id) {
      this.$confirm("此操作将永久删除该对象, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var res = await this.$http.get("delIdType?id=" + id);
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
            this.select();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.selectAllIdType();
  },
};
</script>

<style scoped>
.right-but {
  float: right;
}
</style>